<template>
  <div class="editor">
    <textarea :id="tinymceId"></textarea>
  </div>
</template>

<script>
/**
 * @see{@link http://tinymce.ax-z.cn}
 * */
export default {
  name: "Editor",
  props: ["content", "height"],
  data() {
    return {
      tinymceId: `tinymce-${new Date().getTime()}`
    };
  },
  mounted() {
    window.tinymce
      .init({
        selector: "#" + this.tinymceId,
        language: "zh_CN",
        height: this.height,
        plugins: [
          "advlist autolink colorpicker contextmenu directionality fullscreen hr insertdatetime link lists nonbreaking noneditable paste preview save searchreplace tabfocus table template textcolor"
        ],
        toolbar: [
          "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo",
          "hr bullist numlist link image charmap preview pagebreak insertdatetime table forecolor backcolor"
        ]
      })
      .then(res => {
        this.$emit("ready");
      });
  },
  methods: {
    getContent() {
      return window.tinymce.activeEditor.getContent();
    },
    setContent(content) {
      window.tinymce.activeEditor.setContent(content);
    }
  }
};
</script>

<style scoped></style>
